﻿<common:LayoutAwarePage x:Class="StoreAppLibDemo.Examples.Controls.DatePickerPage"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:common="using:StoreAppLibDemo.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:local="using:StoreAppLibDemo.Examples.Controls"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:storeAppControl="using:StoreAppLib.Controls"
                        mc:Ignorable="d">

    <Grid Style="{StaticResource AppPageStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="40" />
            <RowDefinition />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="1"
                   Margin="0,0,50,0"
                   Source="ms-appx:///Assets/PageLogo.png" />
            <TextBlock Margin="120,0,0,0"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Style="{StaticResource HeaderTextStyle}"
                       Text="Date Picker"
                       TextWrapping="Wrap" />
            <Button Margin="36,0,0,0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Bottom"
                    Click="GoBack"
                    Content="Button"
                    Style="{StaticResource BackButtonStyle}" />

        </Grid>

        <TextBlock Grid.Row="3"
                   Margin="0,0,50,0"
                   HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   FontSize="9"
                   Text="Copyright ©  2012 Suresh Kumar T" />


        <Grid Grid.Row="2" Margin="120,0,50,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="40" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Style="{StaticResource BodyTextStyle}" TextWrapping="Wrap">
                <Run Text="Represents a Windows 8 Store Application control that allows users to select a date and to display the date with a specified format. When editing, the control displays month in a keyboard like popup window. Page will be automatically moved up if the month popup hides the month text box in the page. You can change month by swiping horizontally and zoom out to year view and to decade view by tapping on the header, or by pinching, or by holding the CTRL key down while scrolling the mouse scroll wheel, or by holding the CTRL key down and pressing the + or - key." />
                <LineBreak />
                <LineBreak />
                <Run Text="Tap on the datepicker textbox to select date. Valid date range is ±2 months" />
                <Run Text=". The first datepicker clear button uses Clear() method and the second uses ClearCommand to clear the datepickers. The second date picker has custom colors." />
            </TextBlock>

            <StackPanel Grid.Row="2"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Orientation="Horizontal">
                <TextBlock Style="{StaticResource BodyTextStyle}" Text="Date in 'dd-MMM-yyyy' format :" VerticalAlignment="Center" />
                <storeAppControl:DatePicker x:Name="datePicker1"
                                            Width="150"
                                            Height="30"
                                            BorderBrush="Gray"
                                            BorderThickness="1"
                                            Date="{Binding CurrentDate,
                                                           Mode=TwoWay}"
                                            MaximumDate="{Binding MaximumDate}"
                                            MinimumDate="{Binding MinimumDate}"
                                            DateChanged="OnDatePicker1DateChanged"
                                            Format="dd-MMM-yyyy"
                                            ShowValidationMessage="False" />
                <Button HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Click="Button_Click"
                        Content="✗"
                        FontFamily="Segoe UI Symbol"
                        FontWeight="Normal" />
                <CheckBox x:Name="chkCustomValidation"
                          Content="Show custom validation message using DateChanged event handler"
                          IsChecked="True" />

            </StackPanel>


            <StackPanel Grid.Row="2"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Orientation="Vertical">

                <StackPanel>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap" Text="From Date Validation Message:"/>
                        <TextBox TextWrapping="NoWrap" Text="{Binding MinDateValidationMessage, ElementName=datePicker2, Mode=TwoWay}" Width="550" HorizontalAlignment="Left" Margin="0,5,0,0" AcceptsReturn="True" Height="64"/>
                    </StackPanel>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap" Text="To Date Validation Message:"/>
                        <TextBox TextWrapping="NoWrap" Text="{Binding MaxDateValidationMessage, ElementName=datePicker2, Mode=TwoWay}" Width="550" HorizontalAlignment="Left" Margin="0,5,0,0" AcceptsReturn="True" Height="64"/>
                    </StackPanel>
                </StackPanel>
                
                <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
                <TextBlock Style="{StaticResource BodyTextStyle}" Text="Date in 'dd-MM-yyyy' format :" VerticalAlignment="Center" />
                <storeAppControl:DatePicker x:Name="datePicker2"
                                            Width="150"
                                            Height="30"
                                            BorderBrush="#FFB0E1FB"
                                            BorderThickness="1"
                                            Date="{Binding CurrentDate,
                                                           Mode=TwoWay}"
                                            DateBackground="#FF008CD7"
                                            DateDisabledBackground="#FF615D5D"
                                            DateDisabledForeground="#FFB4AFAF"
                                            DateForeground="White"
                                            DateOtherMonthForeground="#FF3A22E3"
                                            DateTodayForeground="Black"
                                            Format="dd-MM-yyyy"
                                            MaximumDate="{Binding MaximumDate}"
                                            MinimumDate="{Binding MinimumDate}"
                                            MonthHeaderBackground="#FF006AA4"
                                            MonthHeaderForeground="White"
                                            SelectedDateBackground="#FF006AA4"
                                            ShowValidationMessage="True" VerticalAlignment="Center"/>
                <Button HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Command="{Binding ElementName=datePicker2,
                                          Path=ClearCommand}"
                        Content="✗"
                        FontFamily="Segoe UI Symbol"
                        FontWeight="Normal" />
                <CheckBox Content="Show default validation message" IsChecked="{Binding ShowValidationMessage, ElementName=datePicker2, Mode=TwoWay}" />
                </StackPanel>
                </StackPanel>
        </Grid>
    </Grid>
</common:LayoutAwarePage>